<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import type { TableInstance } from 'element-plus'
import { roleList } from '../../utils/trueType'
import utils from '../../utils/utils'
import { useRoleListStore } from '../../store/roleList'
import role from '../../api/role'
import { useAddRoleStore } from '../../store/addRole'
const multipleTableRef = ref<TableInstance>()
const roleListStore = useRoleListStore()
const addRoleStore = useAddRoleStore()
const selectable = (row: roleList) => row.id
const handleSelectionChange = (val: roleList[]) => {
    roleListStore.selectedIds = val.map(item => item.id).filter(id => id !== null && id !== undefined) as string[];
}
async function handleSizeChange(val: []) {
    await role.getAllRole(roleListStore.pageNum,roleListStore.pageSize).then(res => {
        roleListStore.roleList = res.data.data.data
        roleListStore.total = res.data.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        roleListStore.changeLoading()
    })
}
async function handleCurrentChange(val: []) {
    await role.getAllRole(roleListStore.pageNum,roleListStore.pageSize).then(res => {
        roleListStore.roleList = res.data.data.data
        roleListStore.total = res.data.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        roleListStore.changeLoading()
    })
}
async function deleteRole(id) {
    await role.deleteRole(id).then(res => {
    }).catch(err => {
        console.log(err)
    })
    await role.getAllRole(roleListStore.pageNum,roleListStore.pageSize).then(res => {
        roleListStore.roleList = res.data.data.data
        roleListStore.total = res.data.data.total
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        roleListStore.changeLoading()
    })
}
async function editRole(id) {
    await role.getEditRoleDetail(id).then(res => {
        addRoleStore.addRole= res.data.data
        console.log(addRoleStore.addRole)
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        addRoleStore.setOpen(true)
    })
}

onMounted(async() => {
    await role.getAllRole(roleListStore.pageNum,roleListStore.pageSize).then(res => {
        roleListStore.roleList = res.data.data.data
        roleListStore.total = res.data.data.total
    }).catch(err => {
        console.log(err)
    })
})

</script>
<template>
    <el-table v-loading="roleListStore.loading" ref="multipleTableRef" :data="roleListStore.roleList" row-key="id" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55" align="center" header-align="center" />
        <el-table-column property="id" label="角色编号" width="160" align="center" header-align="center" />
        <el-table-column property="roleName" label="角色名称" width="160" align="center" header-align="center" />
        <el-table-column property="roleKey" label="权限字符" width="160" align="center" header-align="center" />
        <el-table-column property="status" label="状态" width="160" align="center" header-align="center">
            <template #default="scope">
                <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                    {{ scope.row.status === 1 ? '正常' : '禁用' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column property="time" label="创建时间" width="180" align="center" header-align="center">
            <template #default="scope">
                {{ utils.formatDate(scope.row.time) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="auto" align="center" header-align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="editRole(scope.row.id)">编辑</el-button>
                <el-button link type="primary" size="small" @click="deleteRole(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="roleListStore.pageNum" v-model:page-size="roleListStore.pageSize"
            :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="roleListStore.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>
<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: end;
    margin-top: 1rem;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    :deep(.el-pagination .el-pagination__sizes) {
        display: none;
    }

    .demo-pagination-block :deep(.el-pagination .el-pagination__jump) {
        display: none;
    }

    .demo-pagination-block {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }
}
</style>